<template>
  <div class="home">
    <!-- 测试用 -->
    <div id="info"></div>
		<div id="inset"></div>
		<div id="container"></div>
  </div>
</template>
<script>
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import { NRRDLoader } from 'three/examples/jsm/loaders/NRRDLoader.js';
import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
export default {
	name: 'HelloWorld',
	
	components: {
	},
	data() {
    return {
			stats: null,
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      gui:null,
			controls: null,
			nrrdloader: null,
			vtkloader: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('container');
 
        this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;
 
        this.scene = new THREE.Scene();
 
        let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
        let material = new THREE.MeshNormalMaterial();
 
        this.mesh = new THREE.Mesh(geometry, material);
				this.scene.add(this.mesh);

        this.gui = new GUI();
				this.nrrdloader = new NRRDLoader(); // 加载模型文件
				this.nrrdloader.load( "../../static/1.nrrd",  volume => {
          console.log(volume)
				});
				this.vtkloader = new VTKLoader()
				this.vtkloader.load( "../../static/bone_1.vtk", function( volume ) {
					console.log(volume)
				});

 
        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);
 
    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate()
  }
}
</script>
<style>
	#container {
    height: 400px;
  }
	#inset {
		width: 150px;
		height: 150px;
		background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
		border: none; /* or none; */
		margin: 0;
		padding: 0px;
		position: absolute;
		left: 20px;
		bottom: 20px;
		z-index: 100;
	}
</style>
